<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link href="css/mui.css" rel="stylesheet" />
	<link rel="stylesheet" href="css/iconfont.css">
	<link rel="stylesheet" href="css/common.css">
	<link rel="stylesheet" href="css/search.css">
</head>
<body style="background-color: #aaff7f;">
	<header class="mui-bar mui-bar-nav">
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		<h1 class="mui-title">垃圾搜索</h1>
	</header>
	<section style="background-color: #aaff7f;">
		<h1></h1>
		<div class='search-input'>
			<form action="" onsubmit="return false" id='search'>
				<input type="search" placeholder="输入垃圾名称" autofocus="autofocus" id='searchInput'/>
			</form>
		</div>
	</section>
	<section class='search-list'>
		<div class='hot-search'>
			<h3>热门搜索</h3>
			<ul id='hostSearch'></ul>
		</div>
		<div class='history-search'>
			<h3>历史记录</h3>
			<ul class="mui-table-view" id='historyList'></ul>
		</div>
	</section>
	<div style="background-color: #aaff7f;width: 300px;height: 600px;"></div>
	
	<script src="./js/mui.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="./js/flexible.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" charset="utf-8">
		mui.init();
		mui.plusReady(function(){
			var storage = localStorage;
			var sHtmlLi = '';
			
			fGetStorage();
			
			mui.ajax('http://apis.juhe.cn/rubbish/hotSearch',{
				data:{
					key:'dfe7a5dc90a9be32d35d15d5a06eb619'
				},
				success:function(data){
					var result = data.result;
					mui.each(result,function(index,item){
						document.querySelector('#hostSearch').innerHTML += `
							<li data-title='${item.itemName}'>${item.itemName}</li>`
					})
				}
			})
			
			// 点击热门搜索区块进行跳转
			mui("#hostSearch").on("tap",'li',function(){
				var dataTitle = this.getAttribute('data-title');
				fToNewpage(dataTitle);
				fSetStorage(dataTitle);
				fGetStorage();
			})
			
			mui('.search-input').on('keypress','#search',function(e){
				var keyCode = e.keyCode;
				var inputVal = document.querySelector('#searchInput').value;
				if(  keyCode == 13 ){
					fToNewpage(inputVal);
					fSetStorage(inputVal);
					fGetStorage();
					//收起键盘
					document.activeElement.blur();
				}
			})
			
			// 点击空白处收起键盘
			window.addEventListener('touchstart',function(){
				document.activeElement.blur();
			},false)
			
			// 封装跳转页面的函数
			function fToNewpage(val){
				mui.openWindow({
					url:'details.html',
					id:'details',
					extras:{
						title:encodeURI(val)
					},
					show:{
					    autoShow:true
					},
					waiting:{
						autoShow:true,
						title:'正在加载...'
					}
				})
			};
			
			function fGetStorage(){
				sHtmlLi = '';
				if( !storage.getItem('historySearch') ){
					storage.setItem('historySearch','[]');
				}
				var arr = JSON.parse( storage.getItem('historySearch') );
				mui.each(arr,function(index,item){
					sHtmlLi+=`<li class="mui-table-view-cell" data-title='${item}'>
							<a class="mui-navigate-right">
								<p>
									<i class='iconfont icon-shijian'></i>${item}
								</p>
							</a>
						</li>`;
				})
				document.querySelector('.mui-table-view').innerHTML = sHtmlLi;
			}
			
			function fSetStorage(val){
				var arr = JSON.parse( storage.getItem('historySearch') );
				var arrFilter = arr.filter(function(item){
					return item.indexOf(val) < 0;
				})
				arrFilter.unshift( val );
				storage.setItem('historySearch',JSON.stringify(arrFilter));
			};
			// 点击搜索历史进行跳转
			mui('#historyList').on('tap','li',function(){
				var dataTitle = this.getAttribute('data-title');
				fToNewpage(dataTitle);
			})
		})
	</script>
</body>

</html>
